<template>
	<view>
		<form class="form_list">
			<view class="view-flex">
				<view class="item1">
					<button :roleid="1-roleid" @click="changeid1" class="changerole" :type="btn1type" :disabled="isDisable">普通用户</button>
				</view>
				<view class="item2">
					<button :roleid="roleid" @click="changeid2" class="changerole" :type="btn2type" :disabled="!isDisable">管理员</button>
				</view>
			</view>
			<view>
				<view v-show="1-roleid">
					<startframe :roleid="roleid" @enter="enter"></startframe>
				</view>
				<view v-show="roleid">
					<startframe :roleid="roleid" @enter="enter"></startframe>
				</view>
			</view>
			<button type="primary" plain="true" @click="formsubmit" style="width: 70%;position: relative;left: 0rpx ;top: 50rpx;">登录</button>
			<navigator url="register" open-type="redirect" hover-class="other-navigator-hover">
				<text class="regist">未有账号？去注册...</text>
			</navigator>
			<navigator url="../tabBar/index/index" open-type="switchTab" hover-class="other-navigator-hover">
				<button>不让我mock我开后门好了</button>
			</navigator>
		</form>
	</view>
</template>

<script>
	import axios from "axios"
	import startframe from "../../component/userstartframe/userstartframe.vue"
	export default {
		components: {
			startframe,
		},
		data() {
			return {
				roleid: 0, //0表示显示普通用户，1表示管理员
				user: {
				userid: '',
				psword: '',					
				},

				showPassword: true,
				btn1type: "primary",
				btn2type: "default",
				isDisable: true
			}
		},
		methods: {
			changeid1: function() {
				this.isDisable = true;
				this.btn1type = "primary";
				this.btn2type = "default";
				return this.roleid = 0;
			},
			changeid2: function() {
				this.isDisable = false;
				this.btn1type = "default";
				this.btn2type = "primary";
				return this.roleid = 1;
			},
			enter: function(val) {
				 this.user = val;
			},
			formsubmit: function() {
				axios({
					method: 'POST',
					header: {Authorization:uni.getStorageSync('token')} ,
					url: '/smartAttendance/index/login',
					data: {
						userid: this.user.userid,
						psword: this.user.psword
					}
				}).then(res => {
					console.log(res.data)
					if (this.roleid == 1) {
						uni.switchTab({
							url:'/pages/tabBar/worklist/worklist'
						})

					} else {
						uni.switchTab({
							url: '/pages/tabBar/index/index'
						})
					}

				}, error => {
					console.log('错误', error.message)
				})
			},
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
		},
/* 		// 侦听器,用于监听数据变化
		watch: {
			roleid: {
				handler(newid, oldid) {
					console.log('新值：' + newid + '旧值：' + oldid);
					if (newid == 0) {
						this.showform1 = 1;
						this.showform2 = 0;
					}
					if (newid == 1) {
						this.showform1 = 0;
						this.showform2 = 1;
					}
				},
				//this.showform = 1 - this.showform;
				// 如果设置了false，那么在页面第一次渲染以后不会触发侦听器
				immediate: true

			}
		} */
	}
</script>

<style scoped>
	template{
		background-color: lightgrey;
	}
	.form_list {
		top: 20%;
		bottom: -20%;
		height:712rpx;
		width: 100%;
		position: absolute;
		display: block;
		box-sizing: border-box;
	}

	.item1 {
		display: inline-block;
		width: 50%;

	}

	.item2 {
		display: inline-block;
		width: 50%;

	}
	.changerole{
		position: relative;
		left: 0 rpx;
		top: -54rpx;
	}
	.view-flex {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.regist {
		position: relative;
		text-align: center;
		left: 30%;
		top: 347rpx;
	}
</style>